<template>
	<view class="page-box">
		<view class="hander-bg-box">
      <view class="hander-bg-info">
        <image :src="avatar" mode="" class="head-portrait-box" v-if="avatar"></image>
        <view v-else class="head-portrait-box">
        </view>
        <view class="name-level-box">
          <view class="name-box">
            {{userName}}
          </view>
          <view class="level-box">
            会员等级：{{levelType}}
          </view>
        </view>
<!--        <view class="detail-btn-box" @click="detailClick">-->
<!--          明细-->
<!--        </view>-->
      </view>
      <view class="hander-bg-money" style="height: 41px;">
<!--        <view class="money-title">{{ userInfo.withdraw_text }}-->
<!--        </view>-->
      </view>
		</view>
		<view class="money-module-box">
			<view style="	width: calc(100%);" class="money-module-boxs">
        <view class="money-value">
          <text class="money-title">权衡奖励</text>
          <view class="detail-btn-box" :class="userInfo.is_withdraw?'':'disabled'" @click="userInfo.is_withdraw?toMoney():''" >
            提现
          </view>
        </view>
<!--        -->
				<view class="money-value">
          <view class="money-left" style="font-size:12px">奖励进度</view>
          <view class="money-right" style="font-size:12px">
          {{ userInfo.withdraw_text}}
          </view>
        </view>
        <text class="money-titles">达到黄金等级后享有权衡奖励</text>
			</view>
<!--			<view>-->
<!--				<text class="money-title">待转账佣金</text>-->
<!--				<text class="money-value">¥{{accountMoney}}</text>-->
<!--			</view>-->
		</view>
		<view class="module-box">
			<view class="module-item-box" v-for="(item,index) in moduleData" :key='index'
				@click="moduleItemClick(item.flag)">
				<image :src="item.icon" mode=""></image>
				<text>{{item.name}}</text>
			</view>
		</view>
		<uni-popup ref='sharePosterShow' type="center" background-color="#fff">
			<view class="share-poster-box">
				<view class="share-poster-head">
					<img :src="avatar" mode=""></img>
					<text>{{userName}}</text>
					<view @click="closeSharePoster"></view>
				</view>
				<view class="share-poster-title">
					<view></view>
					<text>分享海报</text>
					<view></view>
				</view>
				<image class="share-poster-img-box" :src="sharePosterImage" mode=""></image>
				<text class="share-poster-remark">长按识别图中二维码</text>
				<view class="share-poster-btn-box">
					<view class="share-friend-btn" @click="savePhoto">
						保存到相册
					</view>
					<view class="share-friend-btn" @click="shareFriend">
						分享给微信好友
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				moduleData: [{
						name: '我的社群',
						flag: 'team',
						icon: '../../static/team-icon.png'
					},
					{
						name: '推广海报',
						flag: 'share',
						icon: '../../static/share-icon.png'
					},
					{
						name: '社群订单',
						flag: 'order',
						icon: '../../static/order-icon.png'
					},
					{
						name: '奖励明细',
						flag: 'money',
						icon: '../../static/detail-icon.png'
					}
				],
				allMoney: '0', //总收益
				accountMoney: '0', //待转账佣金
				userName: 'admin', //用户名
				levelType: '入会',
				avatar: '',
				userInfo: {},
				sharePosterImage: ''
			}
		},
		onShow() {
			this.getHomeInfo()
		},
		methods: {
			getHomeInfo() {
				let params = {}
				this.$http.post('api/bonus/index', params).then((res) => {
					let data = res.data || {}
					this.levelType = data.level_name || '入会'
					this.allMoney = data.commission_price || '0'
					this.accountMoney = data.wait_commission_price || '0'
					this.userName = data.user_info.nickname || ''
					this.avatar = data.user_info.avatar || ''
					this.userInfo = data.user_info
					uni.setStorage({
						key: 'bankInfo',
						data: JSON.stringify(data.bank_info),
						success: function () {
						}
					});
				}).catch((err) => {

				})
			},
      //查看明细
			detailClick() {
				uni.navigateTo({
					url: '/pages/detail/detail'
				});
			},
      //提现
      toMoney(){
        uni.navigateTo({
          url: '/pages/indexWidthdraw/indexWidthdraw'
        });
      },
			moduleItemClick(flag) {
				switch (flag) {
					case 'team':
						console.log('我的团队')
						uni.navigateTo({
							url: '/pages/team/team'
						});
						break;
					case 'share':
						console.log('分享海报')
						this.getSharePoster()
						break;
					case 'order':
						console.log('分销订单')
						uni.navigateTo({
							url: '/pages/marketOrder/marketOrder'
						});
						break;
					case 'money':
						console.log('佣金明细')
						uni.navigateTo({
							url: '/pages/commissionDetail/commissionDetail?commission_price=' + this.accountMoney +
								'&money=' + this.userInfo.money,
						});
						break;
				}
			},
			// 获取分享海报
			getSharePoster() {
				this.$http.post('api/bonus/getMyImage').then((res) => {
					console.log(res)
					this.sharePosterImage = res.data.image || ''
					this.$refs.sharePosterShow.open()
				}).catch((err) => {
					this.sharePosterImage = ''
					uni.showToast({
						title: err.data.msg || '海报获取失败',
					})
				})
			},
			closeSharePoster() {
				this.$refs.sharePosterShow.close()
			},
			savePhoto() {
				this.saveImage()
			},
			shareFriend() {

			},
			/**
			 * 保存图片
			 */
			saveImage() {
				let that = this;
				// 向用户发起授权请求
				uni.authorize({
					scope: 'scope.writePhotosAlbum',
					success: () => {
						// 已授权
						that.downLoadImg();
					},
					fail: () => {
						// 拒绝授权，获取当前设置
						uni.getSetting({
							success: (result) => {
								if (!result.authSetting['scope.writePhotosAlbum']) {
									that.isAuth()
								}
							}
						});
					}
				})
			},
			/**
			 * 下载资源，保存图片到系统相册
			 */
			downLoadImg() {
				uni.showLoading({
					title: '加载中'
				});
				uni.downloadFile({
					url: this.sharePosterImage,
					success: (res) => {
						uni.hideLoading();
						if (res.statusCode === 200) {
							uni.saveImageToPhotosAlbum({
								filePath: res.tempFilePath,
								success: function() {
									uni.showToast({
										title: "保存成功",
										icon: "none"
									});
								},
								fail: function() {
									uni.showToast({
										title: "保存失败，请稍后重试",
										icon: "none"
									});
								}
							});
						}
					},
					fail: (err) => {
						uni.showToast({
							title: "失败啦",
							icon: "none"
						});
					}
				})
			},
			/*
			 * 引导用户开启权限
			 */
			isAuth() {
				uni.showModal({
					content: '由于您还没有允许保存图片到您相册里,无法进行保存,请点击确定允许授权',
					success: (res) => {
						if (res.confirm) {
							uni.openSetting({
								success: (result) => {
									console.log(result.authSetting);
								}
							});
						}
					}
				});
			}
		}
	}
</script>

<style>
	.hander-bg-box {
		width: 100%;
		height: 240px;
		background-image: url(../../static/home-bg.png);
		background-size: 100% 100%;
		padding: 54px 16px 16px 16px;
		box-sizing: border-box;
		display: flex;
    flex-direction: column;
	}
  .hander-bg-info{
    display: flex;
  }
	.head-portrait-box {
		width: 50px;
		height: 50px;
		background: #D8D8D8;
		border-radius: 25px;
	}
  .hander-bg-money{
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
	.name-level-box {
		margin-left: 10px;
		width: calc(100% - 160px);
		height: 50px;
	}

	.name-box {
		margin-top: 2px;
		height: 24px;
		line-height: 24px;
		font-size: 16px;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #151515;
	}

	.level-box {
		margin-top: 4px;
		width: 130px;
		height: 20px;
		line-height: 20px;
		text-align: center;
		background: linear-gradient(138deg, #F4C695 0%, #E6945C 100%);
		border-radius: 10px;
		font-size: 12px;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
	}

	.detail-btn-box {
    margin-left: auto;
    width: 66px;
    text-align: center;
    background: #FFFFFF;
    border-radius: 16px;
    font-size: 16px;
    padding: 4px 0;
    margin-top: -2px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #151515;
	}
  .disabled{
    background: #fcfcfc;
    color: #cccccc;
  }
	.money-module-box {
		position: absolute;
		left: 16px;
		top: 158px;
		width: calc(100% - 32px);
		height: 114px;
		/* background-color: red; */
		background-image: url(../../static/money-bg.png);
		background-size: 100% 100%;
		padding:16px 24px;
		box-sizing: border-box;
		display: flex;
	}

	.money-module-box>.money-module-boxs {
		width: 80%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.money-title {
		font-size: 20px;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #8E8E8E;
	}
  .money-titles{
    font-size: 12px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #8E8E8E;
  }
	.money-value {
		font-size: 16px;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #F1B792;
    display: flex;
    justify-content: space-between;
	}
  .money-left{
      text-align: left;
  }
  .money-right{
    text-align: right;
  }
	.module-box {
		margin: 53px 16px 0px 16px;
		width: calc(100% - 32px);
		height: 192px;
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.module-item-box {
		width: calc(50% - 10px);
		height: 80px;
		background: #FFFFFF;
		border-radius: 8px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.module-item-box>image {
		width: 32px;
		height: 32px;
	}

	.module-item-box>text {
		margin-left: 18px;
		font-size: 16px;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #151515;
	}

	.share-poster-box {
		width: 300px;
		height: 360px;
		background-color: #fff;
		border-radius: 16px;
		padding: 16px 16px 0px 16px;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.share-poster-head {
		width: 100%;
		height: 44px;
		display: flex;
		align-items: center;
	}

	.share-poster-head>img {
		width: 44px;
		height: 44px;
		border-radius: 22px;
	}

	.share-poster-head>text {
		margin-left: 8px;
		font-size: 16px;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #151515;
	}

	.share-poster-head>view {
		margin-left: auto;
		width: 24px;
		height: 24px;
		margin-top: -16px;
		background: url(../../static/close-icon.png);
		background-size: 100% 100%;
	}

	.share-poster-title {
		margin-top: 22px;
		width: 100%;
		height: 20px;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.share-poster-title>view {
		width: calc(50% - 40px);
		height: 1px;
		background: #E5E5E5;
	}

	.share-poster-title>text {
		font-size: 12px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #8E8E8E;
	}

	.share-poster-img-box {
		margin-top: 24px;
		width: 176px;
		height: 176px;
	}

	.share-poster-remark {
		margin-top: 16px;
		font-size: 12px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #151515;
	}

	.share-poster-btn-box {
		position: absolute;
		left: 0;
		top: 390px;
		width: 100%;
		height: 40px;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.save-photo-btn {
		width: 130px;
		height: 36px;
		line-height: 36px;
		text-align: center;
		border-radius: 8px;
		border: 1px solid #FFFFFF;
		font-size: 14px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
	}

	.share-friend-btn {
		width: 130px;
		height: 36px;
		line-height: 36px;
		text-align: center;
		background: #010101;
		border-radius: 8px;
		font-size: 14px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
	}
	.popup-style /deep/ .mask{
			background: rgba(0, 0, 0, 0.5);
	}
</style>
